<template>
  <div class="line-chart-container">
    <LineChart :chartData="chartData" :height="height" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import LineChart from './LineChart.vue' // 引入我们即将写的图表组件

// 图表数据
const chartData = ref({
  columns: ['时间', '销售额'],
  rows: [
    { 时间: '周一', 销售额: 120 },
    { 时间: '周二', 销售额: 200 },
    { 时间: '周三', 销售额: 150 },
    { 时间: '周四', 销售额: 80 },
    { 时间: '周五', 销售额: 70 },
    { 时间: '周六', 销售额: 110 },
    { 时间: '周日', 销售额: 130 }
  ]
})

// 高度设置（可动态传）
const height = ref('400px')
</script>

<style scoped>
.line-chart-container {
  width: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}
</style>
